<!doctype html>
<html lang="en">
<head>
    <title>Simple Line Icons CheatSheet</title>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="description" content="Simple line icons">
    <meta name="keywords" content="simple, line, icons, icon pack, web icon">
    <link rel="stylesheet" href="styles/simple-line-icons.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/css/bootstrap.min.css">
</head>

<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="https://github.com/thesabbir/simple-line-icons">Simple Line Icons </a>
            <span class="version">2.5.4</span>
        </div>

        <div class="collapse navbar-collapse" id="bs-navbar-collapse">
            <ul class="nav navbar-nav navbar-right">
                <li><iframe src="https://ghbtns.com/github-btn.html?user=thesabbir&repo=simple-line-icons&type=fork&count=true" frameborder="0" scrolling="0" width="100px" height="20px"></iframe></li>
                <li><iframe src="https://ghbtns.com/github-btn.html?user=thesabbir&repo=simple-line-icons&type=star&count=true" frameborder="0" scrolling="0" width="100px" height="20px"></iframe></li>
                <li class="download"><a href="https://github.com/thesabbir/simple-line-icons/archive/master.zip" class="btn btn-success btn-sm">Download</a></li>
            </ul>
        </div>
    </div>
</nav>

<div class="container mt">
    <h3 class="text-center">Cheat sheet</h3>
    <div class="text-center font-size-changer">
        <a href="#" class="small-icons"><i class="icon-info"></i>Small</a> &bull;
        <a href="#" class="medium-icons active"><i class="icon-info"></i> Medium</a> &bull;
        <a href="#" class="large-icons"><i class="icon-info"></i> Large</a>
    </div>
    <p class="text-center">Click on the icons to get the icon class name</p>
    <div class="quick-search">
        <input type="text" id="quick-search" placeholder="Search..." />
        <i class="icon-magnifier"></i>
    </div>


    <div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
      <div class="preview">
      <a href="#" class="show-code" title="click to show css class name"><i class="icon-user icons"></i><span class="name">user</span> <code class="code-preview">.icon-user</code></a>
  </div>
  </div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
      <div class="preview">
      <a href="#" class="show-code" title="click to show css class name"><i class="icon-user-female icons"></i><span class="name">user-female</span> <code class="code-preview">.icon-user-female</code></a>
  </div>
  </div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
      <div class="preview">
      <a href="#" class="show-code" title="click to show css class name"><i class="icon-user-following icons"></i><span class="name">user-following</span> <code class="code-preview">.icon-user-following</code></a>
  </div>
  </div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
      <div class="preview">
      <a href="#" class="show-code" title="click to show css class name"><i class="icon-login icons"></i><span class="name">login</span> <code class="code-preview">.icon-login</code></a>
  </div>
  </div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
      <div class="preview">
      <a href="#" class="show-code" title="click to show css class name"><i class="icon-emotsmile icons"></i><span class="name">emotsmile</span> <code class="code-preview">.icon-emotsmile</code></a>
  </div>
  </div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
      <div class="preview">
      <a href="#" class="show-code" title="click to show css class name"><i class="icon-call-end icons"></i><span class="name">call-end</span> <code class="code-preview">.icon-call-end</code></a>
  </div>
  </div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
      <div class="preview">
      <a href="#" class="show-code" title="click to show css class name"><i class="icon-call-out icons"></i><span class="name">call-out</span> <code class="code-preview">.icon-call-out</code></a>
  </div>
  </div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
      <div class="preview">
      <a href="#" class="show-code" title="click to show css class name"><i class="icon-location-pin icons"></i><span class="name">location-pin</span> <code class="code-preview">.icon-location-pin</code></a>
  </div>
  </div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
      <div class="preview">
      <a href="#" class="show-code" title="click to show css class name"><i class="icon-directions icons"></i><span class="name">directions</span> <code class="code-preview">.icon-directions</code></a>
  </div>
  </div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
      <div class="preview">
      <a href="#" class="show-code" title="click to show css class name"><i class="icon-layers icons"></i><span class="name">layers</span> <code class="code-preview">.icon-layers</code></a>
  </div>
  </div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
      <div class="preview">
      <a href="#" class="show-code" title="click to show css class name"><i class="icon-list icons"></i><span class="name">list</span> <code class="code-preview">.icon-list</code></a>
  </div>
  </div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
      <div class="preview">
      <a href="#" class="show-code" title="click to show css class name"><i class="icon-options icons"></i><span class="name">options</span> <code class="code-preview">.icon-options</code></a>
  </div>
  </div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
      <div class="preview">
      <a href="#" class="show-code" title="click to show css class name"><i class="icon-arrow-left icons"></i><span class="name">arrow-left</span> <code class="code-preview">.icon-arrow-left</code></a>
  </div>
  </div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
      <div class="preview">
      <a href="#" class="show-code" title="click to show css class name"><i class="icon-arrow-up icons"></i><span class="name">arrow-up</span> <code class="code-preview">.icon-arrow-up</code></a>
  </div>
  </div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
      <div class="preview">
      <a href="#" class="show-code" title="click to show css class name"><i class="icon-arrow-left-circle icons"></i><span class="name">arrow-left-circle</span> <code class="code-preview">.icon-arrow-left-circle</code></a>
  </div>
  </div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
      <div class="preview">
      <a href="#" class="show-code" title="click to show css class name"><i class="icon-arrow-down-circle icons"></i><span class="name">arrow-down-circle</span> <code class="code-preview">.icon-arrow-down-circle</code></a>
  </div>
  </div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
      <div class="preview">
      <a href="#" class="show-code" title="click to show css class name"><i class="icon-clock icons"></i><span class="name">clock</span> <code class="code-preview">.icon-clock</code></a>
  </div>
  </div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
      <div class="preview">
      <a href="#" class="show-code" title="click to show css class name"><i class="icon-minus icons"></i><span class="name">minus</span> <code class="code-preview">.icon-minus</code></a>
  </div>
  </div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
      <div class="preview">
      <a href="#" class="show-code" title="click to show css class name"><i class="icon-event icons"></i><span class="name">event</span> <code class="code-preview">.icon-event</code></a>
  </div>
  </div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
      <div class="preview">
      <a href="#" class="show-code" title="click to show css class name"><i class="icon-organization icons"></i><span class="name">organization</span> <code class="code-preview">.icon-organization</code></a>
  </div>
  </div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
      <div class="preview">
      <a href="#" class="show-code" title="click to show css class name"><i class="icon-screen-smartphone icons"></i><span class="name">screen-smartphone</span> <code class="code-preview">.icon-screen-smartphone</code></a>
  </div>
  </div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
      <div class="preview">
      <a href="#" class="show-code" title="click to show css class name"><i class="icon-plane icons"></i><span class="name">plane</span> <code class="code-preview">.icon-plane</code></a>
  </div>
  </div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
      <div class="preview">
      <a href="#" class="show-code" title="click to show css class name"><i class="icon-mustache icons"></i><span class="name">mustache</span> <code class="code-preview">.icon-mustache</code></a>
  </div>
  </div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
      <div class="preview">
      <a href="#" class="show-code" title="click to show css class name"><i class="icon-magnet icons"></i><span class="name">magnet</span> <code class="code-preview">.icon-magnet</code></a>
  </div>
  </div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
      <div class="preview">
      <a href="#" class="show-code" title="click to show css class name"><i class="icon-disc icons"></i><span class="name">disc</span> <code class="code-preview">.icon-disc</code></a>
  </div>
  </div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
      <div class="preview">
      <a href="#" class="show-code" title="click to show css class name"><i class="icon-cursor-move icons"></i><span class="name">cursor-move</span> <code class="code-preview">.icon-cursor-move</code></a>
  </div>
  </div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
      <div class="preview">
      <a href="#" class="show-code" title="click to show css class name"><i class="icon-chemistry icons"></i><span class="name">chemistry</span> <code class="code-preview">.icon-chemistry</code></a>
  </div>
  </div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
      <div class="preview">
      <a href="#" class="show-code" title="click to show css class name"><i class="icon-shield icons"></i><span class="name">shield</span> <code class="code-preview">.icon-shield</code></a>
  </div>
  </div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
      <div class="preview">
      <a href="#" class="show-code" title="click to show css class name"><i class="icon-magic-wand icons"></i><span class="name">magic-wand</span> <code class="code-preview">.icon-magic-wand</code></a>
  </div>
  </div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
      <div class="preview">
      <a href="#" class="show-code" title="click to show css class name"><i class="icon-graduation icons"></i><span class="name">graduation</span> <code class="code-preview">.icon-graduation</code></a>
  </div>
  </div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
      <div class="preview">
      <a href="#" class="show-code" title="click to show css class name"><i class="icon-game-controller icons"></i><span class="name">game-controller</span> <code class="code-preview">.icon-game-controller</code></a>
  </div>
  </div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
      <div class="preview">
      <a href="#" class="show-code" title="click to show css class name"><i class="icon-eyeglass icons"></i><span class="name">eyeglass</span> <code class="code-preview">.icon-eyeglass</code></a>
  </div>
  </div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
      <div class="preview">
      <a href="#" class="show-code" title="click to show css class name"><i class="icon-envelope-letter icons"></i><span class="name">envelope-letter</span> <code class="code-preview">.icon-envelope-letter</code></a>
  </div>
  </div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
      <div class="preview">
      <a href="#" class="show-code" title="click to show css class name"><i class="icon-badge icons"></i><span class="name">badge</span> <code class="code-preview">.icon-badge</code></a>
  </div>
  </div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
      <div class="preview">
      <a href="#" class="show-code" title="click to show css class name"><i class="icon-wallet icons"></i><span class="name">wallet</span> <code class="code-preview">.icon-wallet</code></a>
  </div>
  </div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
      <div class="preview">
      <a href="#" class="show-code" title="click to show css class name"><i class="icon-speech icons"></i><span class="name">speech</span> <code class="code-preview">.icon-speech</code></a>
  </div>
  </div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
      <div class="preview">
      <a href="#" class="show-code" title="click to show css class name"><i class="icon-printer icons"></i><span class="name">printer</span> <code class="code-preview">.icon-printer</code></a>
  </div>
  </div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
      <div class="preview">
      <a href="#" class="show-code" title="click to show css class name"><i class="icon-playlist icons"></i><span class="name">playlist</span> <code class="code-preview">.icon-playlist</code></a>
  </div>
  </div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
      <div class="preview">
      <a href="#" class="show-code" title="click to show css class name"><i class="icon-picture icons"></i><span class="name">picture</span> <code class="code-preview">.icon-picture</code></a>
  </div>
  </div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
      <div class="preview">
      <a href="#" class="show-code" title="click to show css class name"><i class="icon-globe-alt icons"></i><span class="name">globe-alt</span> <code class="code-preview">.icon-globe-alt</code></a>
  </div>
  </div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
      <div class="preview">
      <a href="#" class="show-code" title="click to show css class name"><i class="icon-folder-alt icons"></i><span class="name">folder-alt</span> <code class="code-preview">.icon-folder-alt</code></a>
  </div>
  </div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
      <div class="preview">
      <a href="#" class="show-code" title="click to show css class name"><i class="icon-film icons"></i><span class="name">film</span> <code class="code-preview">.icon-film</code></a>
  </div>
  </div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
      <div class="preview">
      <a href="#" class="show-code" title="click to show css class name"><i class="icon-drop icons"></i><span class="name">drop</span> <code class="code-preview">.icon-drop</code></a>
  </div>
  </div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
      <div class="preview">
      <a href="#" class="show-code" title="click to show css class name"><i class="icon-docs icons"></i><span class="name">docs</span> <code class="code-preview">.icon-docs</code></a>
  </div>
  </div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
      <div class="preview">
      <a href="#" class="show-code" title="click to show css class name"><i class="icon-diamond icons"></i><span class="name">diamond</span> <code class="code-preview">.icon-diamond</code></a>
  </div>
  </div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
      <div class="preview">
      <a href="#" class="show-code" title="click to show css class name"><i class="icon-calculator icons"></i><span class="name">calculator</span> <code class="code-preview">.icon-calculator</code></a>
  </div>
  </div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
      <div class="preview">
      <a href="#" class="show-code" title="click to show css class name"><i class="icon-briefcase icons"></i><span class="name">briefcase</span> <code class="code-preview">.icon-briefcase</code></a>
  </div>
  </div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
      <div class="preview">
      <a href="#" class="show-code" title="click to show css class name"><i class="icon-basket-loaded icons"></i><span class="name">basket-loaded</span> <code class="code-preview">.icon-basket-loaded</code></a>
  </div>
  </div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
      <div class="preview">
      <a href="#" class="show-code" title="click to show css class name"><i class="icon-bag icons"></i><span class="name">bag</span> <code class="code-preview">.icon-bag</code></a>
  </div>
  </div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
      <div class="preview">
      <a href="#" class="show-code" title="click to show css class name"><i class="icon-action-redo icons"></i><span class="name">action-redo</span> <code class="code-preview">.icon-action-redo</code></a>
  </div>
  </div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
      <div class="preview">
      <a href="#" class="show-code" title="click to show css class name"><i class="icon-umbrella icons"></i><span class="name">umbrella</span> <code class="code-preview">.icon-umbrella</code></a>
  </div>
  </div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
      <div class="preview">
      <a href="#" class="show-code" title="click to show css class name"><i class="icon-tag icons"></i><span class="name">tag</span> <code class="code-preview">.icon-tag</code></a>
  </div>
  </div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
      <div class="preview">
      <a href="#" class="show-code" title="click to show css class name"><i class="icon-frame icons"></i><span class="name">frame</span> <code class="code-preview">.icon-frame</code></a>
  </div>
  </div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
      <div class="preview">
      <a href="#" class="show-code" title="click to show css class name"><i class="icon-size-actual icons"></i><span class="name">size-actual</span> <code class="code-preview">.icon-size-actual</code></a>
  </div>
  </div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
      <div class="preview">
      <a href="#" class="show-code" title="click to show css class name"><i class="icon-share-alt icons"></i><span class="name">share-alt</span> <code class="code-preview">.icon-share-alt</code></a>
  </div>
  </div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
      <div class="preview">
      <a href="#" class="show-code" title="click to show css class name"><i class="icon-rocket icons"></i><span class="name">rocket</span> <code class="code-preview">.icon-rocket</code></a>
  </div>
  </div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
      <div class="preview">
      <a href="#" class="show-code" title="click to show css class name"><i class="icon-pie-chart icons"></i><span class="name">pie-chart</span> <code class="code-preview">.icon-pie-chart</code></a>
  </div>
  </div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
      <div class="preview">
      <a href="#" class="show-code" title="click to show css class name"><i class="icon-note icons"></i><span class="name">note</span> <code class="code-preview">.icon-note</code></a>
  </div>
  </div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
      <div class="preview">
      <a href="#" class="show-code" title="click to show css class name"><i class="icon-home icons"></i><span class="name">home</span> <code class="code-preview">.icon-home</code></a>
  </div>
  </div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
      <div class="preview">
      <a href="#" class="show-code" title="click to show css class name"><i class="icon-graph icons"></i><span class="name">graph</span> <code class="code-preview">.icon-graph</code></a>
  </div>
  </div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
      <div class="preview">
      <a href="#" class="show-code" title="click to show css class name"><i class="icon-music-tone-alt icons"></i><span class="name">music-tone-alt</span> <code class="code-preview">.icon-music-tone-alt</code></a>
  </div>
  </div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
      <div class="preview">
      <a href="#" class="show-code" title="click to show css class name"><i class="icon-earphones-alt icons"></i><span class="name">earphones-alt</span> <code class="code-preview">.icon-earphones-alt</code></a>
  </div>
  </div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
      <div class="preview">
      <a href="#" class="show-code" title="click to show css class name"><i class="icon-equalizer icons"></i><span class="name">equalizer</span> <code class="code-preview">.icon-equalizer</code></a>
  </div>
  </div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
      <div class="preview">
      <a href="#" class="show-code" title="click to show css class name"><i class="icon-dislike icons"></i><span class="name">dislike</span> <code class="code-preview">.icon-dislike</code></a>
  </div>
  </div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
      <div class="preview">
      <a href="#" class="show-code" title="click to show css class name"><i class="icon-control-rewind icons"></i><span class="name">control-rewind</span> <code class="code-preview">.icon-control-rewind</code></a>
  </div>
  </div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
      <div class="preview">
      <a href="#" class="show-code" title="click to show css class name"><i class="icon-control-pause icons"></i><span class="name">control-pause</span> <code class="code-preview">.icon-control-pause</code></a>
  </div>
  </div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
      <div class="preview">
      <a href="#" class="show-code" title="click to show css class name"><i class="icon-control-end icons"></i><span class="name">control-end</span> <code class="code-preview">.icon-control-end</code></a>
  </div>
  </div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
      <div class="preview">
      <a href="#" class="show-code" title="click to show css class name"><i class="icon-volume-2 icons"></i><span class="name">volume-2</span> <code class="code-preview">.icon-volume-2</code></a>
  </div>
  </div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
      <div class="preview">
      <a href="#" class="show-code" title="click to show css class name"><i class="icon-calendar icons"></i><span class="name">calendar</span> <code class="code-preview">.icon-calendar</code></a>
  </div>
  </div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
      <div class="preview">
      <a href="#" class="show-code" title="click to show css class name"><i class="icon-chart icons"></i><span class="name">chart</span> <code class="code-preview">.icon-chart</code></a>
  </div>
  </div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
      <div class="preview">
      <a href="#" class="show-code" title="click to show css class name"><i class="icon-bubble icons"></i><span class="name">bubble</span> <code class="code-preview">.icon-bubble</code></a>
  </div>
  </div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
      <div class="preview">
      <a href="#" class="show-code" title="click to show css class name"><i class="icon-camera icons"></i><span class="name">camera</span> <code class="code-preview">.icon-camera</code></a>
  </div>
  </div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
      <div class="preview">
      <a href="#" class="show-code" title="click to show css class name"><i class="icon-cloud-upload icons"></i><span class="name">cloud-upload</span> <code class="code-preview">.icon-cloud-upload</code></a>
  </div>
  </div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
      <div class="preview">
      <a href="#" class="show-code" title="click to show css class name"><i class="icon-eye icons"></i><span class="name">eye</span> <code class="code-preview">.icon-eye</code></a>
  </div>
  </div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
      <div class="preview">
      <a href="#" class="show-code" title="click to show css class name"><i class="icon-heart icons"></i><span class="name">heart</span> <code class="code-preview">.icon-heart</code></a>
  </div>
  </div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
      <div class="preview">
      <a href="#" class="show-code" title="click to show css class name"><i class="icon-key icons"></i><span class="name">key</span> <code class="code-preview">.icon-key</code></a>
  </div>
  </div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
      <div class="preview">
      <a href="#" class="show-code" title="click to show css class name"><i class="icon-lock icons"></i><span class="name">lock</span> <code class="code-preview">.icon-lock</code></a>
  </div>
  </div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
      <div class="preview">
      <a href="#" class="show-code" title="click to show css class name"><i class="icon-magnifier icons"></i><span class="name">magnifier</span> <code class="code-preview">.icon-magnifier</code></a>
  </div>
  </div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
      <div class="preview">
      <a href="#" class="show-code" title="click to show css class name"><i class="icon-magnifier-remove icons"></i><span class="name">magnifier-remove</span> <code class="code-preview">.icon-magnifier-remove</code></a>
  </div>
  </div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
      <div class="preview">
      <a href="#" class="show-code" title="click to show css class name"><i class="icon-paper-plane icons"></i><span class="name">paper-plane</span> <code class="code-preview">.icon-paper-plane</code></a>
  </div>
  </div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
      <div class="preview">
      <a href="#" class="show-code" title="click to show css class name"><i class="icon-refresh icons"></i><span class="name">refresh</span> <code class="code-preview">.icon-refresh</code></a>
  </div>
  </div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
      <div class="preview">
      <a href="#" class="show-code" title="click to show css class name"><i class="icon-settings icons"></i><span class="name">settings</span> <code class="code-preview">.icon-settings</code></a>
  </div>
  </div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
      <div class="preview">
      <a href="#" class="show-code" title="click to show css class name"><i class="icon-symbol-female icons"></i><span class="name">symbol-female</span> <code class="code-preview">.icon-symbol-female</code></a>
  </div>
  </div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
      <div class="preview">
      <a href="#" class="show-code" title="click to show css class name"><i class="icon-target icons"></i><span class="name">target</span> <code class="code-preview">.icon-target</code></a>
  </div>
  </div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
      <div class="preview">
      <a href="#" class="show-code" title="click to show css class name"><i class="icon-paypal icons"></i><span class="name">paypal</span> <code class="code-preview">.icon-paypal</code></a>
  </div>
  </div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
      <div class="preview">
      <a href="#" class="show-code" title="click to show css class name"><i class="icon-social-twitter icons"></i><span class="name">social-twitter</span> <code class="code-preview">.icon-social-twitter</code></a>
  </div>
  </div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
      <div class="preview">
      <a href="#" class="show-code" title="click to show css class name"><i class="icon-social-instagram icons"></i><span class="name">social-instagram</span> <code class="code-preview">.icon-social-instagram</code></a>
  </div>
  </div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
      <div class="preview">
      <a href="#" class="show-code" title="click to show css class name"><i class="icon-social-pinterest icons"></i><span class="name">social-pinterest</span> <code class="code-preview">.icon-social-pinterest</code></a>
  </div>
  </div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
      <div class="preview">
      <a href="#" class="show-code" title="click to show css class name"><i class="icon-social-google icons"></i><span class="name">social-google</span> <code class="code-preview">.icon-social-google</code></a>
  </div>
  </div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
      <div class="preview">
      <a href="#" class="show-code" title="click to show css class name"><i class="icon-social-skype icons"></i><span class="name">social-skype</span> <code class="code-preview">.icon-social-skype</code></a>
  </div>
  </div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
      <div class="preview">
      <a href="#" class="show-code" title="click to show css class name"><i class="icon-social-behance icons"></i><span class="name">social-behance</span> <code class="code-preview">.icon-social-behance</code></a>
  </div>
  </div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
      <div class="preview">
      <a href="#" class="show-code" title="click to show css class name"><i class="icon-social-soundcloud icons"></i><span class="name">social-soundcloud</span> <code class="code-preview">.icon-social-soundcloud</code></a>
  </div>
  </div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
      <div class="preview">
      <a href="#" class="show-code" title="click to show css class name"><i class="icon-social-stumbleupon icons"></i><span class="name">social-stumbleupon</span> <code class="code-preview">.icon-social-stumbleupon</code></a>
  </div>
  </div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
      <div class="preview">
      <a href="#" class="show-code" title="click to show css class name"><i class="icon-social-dropbox icons"></i><span class="name">social-dropbox</span> <code class="code-preview">.icon-social-dropbox</code></a>
  </div>
  </div><div class="icon-preview-box col-xs-6 col-md-3 col-lg-3">
      <div class="preview">
      <a href="#" class="show-code" title="click to show css class name"><i class="icon-social-steam icons"></i><span class="name">social-steam</span> <code class="code-preview">.icon-social-steam</code></a>
  </div>
  </div>

</div>
<footer class="footer">
    <div class="container">
        <p class="pull-left">Brought to you by <a href="https://twitter.com/alreadysabbir">Sabbir</a> & <a href="https://github.com/thesabbir/simple-line-icons#contributors">Contributors</a></p>
        <p class="pull-right">
            <a href="https://cdnjs.com/libraries/simple-line-icons" class="use-cdn" title="Go to project page on cdnjs.com" target="_blank">Use CDN</a>
            <a href="https://github.com/thesabbir/simple-line-icons">Contribute!</a>
        </p>
    </div>
</footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script>
    $(document).ready(function() {
        $('.code-preview').hide();
        $('.show-code').click(function (e) {
            $(this).children('.name').toggle();
            $(this).children('.code-preview').toggle();
            e.stopPropagation();
            return false;
        });
        $("#quick-search").keyup(function () {
            var srch = $(this).val().trim().toLowerCase();
            $(".icon-preview-box").hide()
                .filter(function () {
                    return $(this).html().trim().toLowerCase().indexOf(srch) != -1;
                }).show();
        });
        $(".font-size-changer a").click(function (e) {
            e.preventDefault();
            $(".font-size-changer .active").removeClass("active");
            $(".icon-preview-box").removeClass("small-icons medium-icons large-icons").addClass($(this).attr("class"));
            $(this).addClass("active");
        });
    });
</script>
<style>
    .preview {
        padding: 15px 0;
        position: relative;
        height: 100px;
    }

    .icons {
        font-size: 18px;
        padding-right: 7px;
    }

    .code-preview {
        display: none;
    }

    .name {
        font-size: 18px;
    }

    .show-code {
        color: #101010;
    }
    .mt {
        padding-top: 50px;
    }

    .show-code:hover, .show-code:active, .show-code:focus {
        color: #252525;
        text-decoration: none;
    }
    .footer {
        background: #efefef;
        min-height: 60px;
        padding: 20px;
    }
    .navbar-inverse .navbar-brand, .navbar-inverse .navbar-nav > li > a {
        color: #ffffff;
    }
    .navbar-nav > li > iframe {
        margin-top: 13px;
    }
    body {
        font-family: "Helvetica Neue", "Roboto", sans-serif;
    }
    .quick-search {
        width: 200px;
        margin: 25px auto;
        position: relative;
    }
    .quick-search i {
        position: absolute;
        left: 7px;
        top: 7px;
        color: #ccc;
    }
    .quick-search input {
        border: 1px solid #ccc;
        border-radius: 3px;
        padding: 3px;
        text-indent: 22px;
        width: 100%;
    }
    .quick-search input:focus {
        border-color: #999;
    }
    .quick-search input:focus + i {
        color: #999;
    }
    .small-icons, .small-icons .icons {font-size: 8pt; vertical-align: middle;}
    .medium-icons {vertical-align: middle;}
    .large-icons, .large-icons .icons {font-size: 22pt; vertical-align: middle;}
    .font-size-changer a {text-decoration: none; border: 1px solid #fff; border-radius: 3px; display: inline-block; padding: 5px; vertical-align: middle;}
    .font-size-changer a.active {border-color: #999; color: #333;}
    .version {
        font-size: 8px;
        color: #eeeeee;
    }
    .download {
        padding: 8px 0 0 8px;
    }

    .download .btn {
        padding-right: 25px;
        padding-left: 25px;
        height: 32px;
        line-height: 0;
    }
    .use-cdn {
        margin-right: 2rem;
    }
</style>
</body>
</html>
